<template>
  <div>
    <!-- <LjTable
      :tabDataList="tabDataList"
      :columnList="columnList"
      :setOperation="setOperation"
      :setSettings="setSettings"
      @onEvent="onEvent"
      @batchDelete="batchDelete"
      @pageSizeEvent="pageSizeEvent"
      @pageEvent="pageEvent"
      @on-load="onLoad"
    >
      <template v-slot:name="{ row }"> {{ "名字:" + row.name }} </template>
    </LjTable> -->
    <ComTable
      ref="comtable"
      :table-loading="loading"
      :data="data"
      :option="option"
      :page.sync="page"
      @selection-change="selectionChange"
      @on-load="onLoad"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-event="onEvent"
      @batch-delete="batchDelete"
    >
      <!-- 自定义表头 -->
      <template v-slot:nameHeader="{ column }">
        {{ "表头:" + column.label }}
      </template>
      <!-- 自定义表格 -->
      <template v-slot:name="{ row }"> {{ "名字:" + row.name }} </template>
      <!-- 自定义添加按钮 -->
      <!-- 事件方法 @click="$refs['comtable'].onEvent(null, 'add')" -->
      <!-- onEvent(null, 'add') -->
      <template slot="menuLeft">
        <el-button
          :size="option.btnSize"
          type="danger"
          @click="onEvent(null, 'add')"
          >自定义添加按钮</el-button
        >
      </template>
      <!-- 自定义操作按钮 -->
      <template v-slot:menu="{ row }">
        <el-button
          :size="option.btnSize"
          type="text"
          @click="onEvent(row, 'aaa')"
          >自定义按钮</el-button
        >
      </template>
    </ComTable>
  </div>
</template>

<script>
import ComTable from "./components/com-table.vue";
import { getList } from "@/apis/test-api.js";

export default {
  components: { ComTable },
  data() {
    return {
      // 加载状态
      loading: true,
      // 分页
      page: {
        pageSize: 10,
        currentPage: 1,
        // pageSizes: [5, 20],
        total: 0,
      },
      // 数据
      data: [],
      // 多选参数
      selectionList: [],
      // 表单配置
      option: {
        index: true, // 是否显示序号 默认:true
        selection: true, // 是否显示多选按钮 默认:true
        pagination: true, // 是否显示分页 默认:true

        // 操作配置
        operation: true, // 是否显示操作列 默认:true
        operationWidth: "250px", // 操作列宽度 默认:180px

        btnSize: "small", // 按钮尺寸

        // 添加按钮
        addBtn: true, // 是否显示按钮
        addBtnText: "添加", // 按钮文字
        addBtnIcon: "el-icon-plus", // 按钮图标

        // 批量删除按钮
        batchDelBtnText: "批 量 删 除",
        batchDelBtnIcon: "el-icon-delete",

        // 查看按钮
        viewBtn: true,
        viewBtnText: "查看",
        viewBtnIcon: "el-icon-view",

        // 编辑按钮
        editBtn: true,
        editBtnText: "编辑",
        editBtnIcon: "el-icon-edit",

        // 删除按钮
        delBtn: true,
        delBtnText: "删除",
        delBtnIcon: "el-icon-delete",

        // 表头
        column: [
          {
            prop: "account",
            label: "账户",
            width: 200,
          },
          {
            prop: "deptName",
            label: "部门",
            width: 200,
          },
          {
            prop: "name",
            label: "名字",
            width: 300,
          },
          {
            prop: "phone",
            label: "电话",
          },
        ],
      },
    };
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    // row: 数据,type: 操作列事件类型
    onEvent(row, type) {
      console.log(row, type);
    },

    // 批量操作
    batchDelete(row) {
      console.log(row);
      this.selectionList = row;
    },

    // 当前的页数
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },

    // 每页显示条数
    sizeChange(pageSize) {
      this.page.currentPage = pageSize;
    },

    // 多选
    selectionChange(list) {
      console.log("多选", list);
      this.selectionList = list;
    },

    // 初始化
    onLoad(page) {
      this.loading = true;
      getList(page).then((res) => {
        this.loading = false;
        this.data = res.data.list;
        this.page.total = res.data.total;
      });
    },
  },
};
</script>